<template>
  <dv-full-screen-container>
    <div class="header">
      <div class="title">
        <img src="./assets/img/bt2.png" alt="">
        <h1>南浔镇智慧充电数字化管理平台</h1>
        <img src="./assets/img/bt1.png" alt="">
        <div class="note">
          <img src="./assets/img/logo.png" alt="">
          <span>规范停车</span>
          <span>安全用电</span>
          <span>普惠民生</span>
        </div>
      </div>
      <dv-decoration-10 style="width:100%;height:5px;" />
      <ul>
        <li>
          <img src="./assets/img/time.png" alt="">
          <div>
            <p>累计时长</p>
            <p style="color: #eadc22;">1200<span style="font-size: 14px;">h</span></p>
          </div>
        </li>
        <li>
          <img src="./assets/img/electricity.png" alt="">
          <div>
            <p>总耗电量</p>
            <p style="color: #5af6a9;">638</p>
          </div>
        </li>
        <li>
          <img src="./assets/img/chargPort.png" alt="">
          <div>
            <p>充电口总数</p>
            <p style="color: #3efcfd;">300</p>
          </div>
        </li>
        <li>
          <img src="./assets/img/allCar.png" alt="">
          <div @click="showAllElectricCar">
            <p>电车总数</p>
            <p style="color: #59a5cc;">800</p>
          </div>
        </li>
        <li>
          <img src="./assets/img/user.png" alt="">
          <div>
            <p>总用户数</p>
            <p style="color: #58e4c0;">600</p>
          </div>
        </li>
        <li>
          <img src="./assets/img/community.png" alt="">
          <div>
            <p>驿站入驻</p>
            <p style="color: #a76ad6;">3</p>
          </div>
        </li>
        <li>
          <img src="./assets/img/carBon.png" alt="">
          <div>
            <p>减少碳排量</p>
            <p style="color: #4eee0e;">251<span style="font-size: 14px;">KG</span></p>
          </div>
        </li>
        <li>
          <img src="./assets/img/alarm.png" alt="">
          <div>
            <p>充电报警次数</p>
            <p style="color: #fda1e4;">10</p>
          </div>
        </li>
      </ul>
      
    </div>
    <div class="container">
      <div class="col1">
        <div class="row1">
          <!-- <dv-border-box-8> -->
            <module1></module1>
          <!-- </dv-border-box-8> -->
        </div>
        <div class="row2">
          <!-- <dv-border-box-8> -->
            <module2></module2>
          <!-- </dv-border-box-8> -->
        </div>
      </div>
      <div class="col2">
        <div class="row1">
          <module3 @mapInfo="onShowMapInfo"></module3>
        </div>
        <div class="row2">
          <!-- <dv-border-box-8> -->
            <module4></module4>
          <!-- </dv-border-box-8> -->
        </div>
      </div>
      <div class="col3">
        <!-- <dv-border-box-8> -->
          <module5 @showMonitor="showMonitor" @showThermalImage="showThermalImage"></module5>
        <!-- </dv-border-box-8> -->
      </div>
    </div>
    <transition name="fade">
      <div v-if="isShow" class="center">
        <component :is="componentsList[selected]" :position="position" :type="type"></component>
        <div class="close" @click="closeMonitor">
          <img src="./assets/img/close.png" alt="">
        </div>
      </div>
    </transition>
  </dv-full-screen-container>
</template>

<script>
import module1 from "./components/module1.vue"
import module2 from "./components/module2.vue"
import module3 from "./components/module3.vue"
import module4 from "./components/module4.vue"
import module5 from "./components/module5.vue"
import state from "./assets/js/reactive.js"
import monitor from "./components/monitor.vue"
import electricCar from "./components/electricCar"
import mapInfo from "./components/mapInfo"
import {getAccessToken, rfcharge} from "./api/index_api.js"
export default {
  name: "App",
  data() {
    return {
      isShow: false,
      selected: 0,
      type: null,
      componentsList: ["monitor", "electricCar", "mapInfo"],
      position: null
    }
  },
  components: {
    module1,
    module2,
    module3,
    module4,
    module5,
    monitor,
    electricCar,
    mapInfo
  },
  created() {
    this.GetAccessToken()
  },
  mounted() {
    console.log(state.isShow)
  },
  methods: {
    showMonitor() {
      this.isShow = true;
      this.selected = 0;
      this.type = "monitor"
    },
    showThermalImage() {
      this.isShow = true;
      this.selected = 0;
      this.type = "thermalImage"
    },
    closeMonitor() {
      this.isShow = false;
    },
    showAllElectricCar() {
      this.isShow = true;
      this.selected = 1;
    },
    onShowMapInfo(data) {
      this.position = data;
      this.isShow = true;
      this.selected = 2
    },
    GetAccessToken() {
      getAccessToken({
        params: {
          apikey: "333333",
          appsecret: "333333"
        }
      }).then((res)=> {
        console.log(res);
        rfcharge({
          params: {
            token: res.access_token
          }
        }).then((res)=> {
          console.log(res)
        })
      })
    }
  }
}
</script>

<style>
* {
  padding: 0;
  margin: 0;
}
html , body {
  width: 100%;
  height: 100%;
}
div {
  box-sizing: border-box;
}
li {
  list-style: none;
  box-sizing: border-box;
}
::-webkit-scrollbar {
  width: 1px;
}
.dv-scroll-board .header {
  font-size: 10px!important;
}
.dv-scroll-board .header .header-item {
  padding: 0!important;
}
.dv-scroll-board .rows .row-item {
  font-size: 10px!important;
}
.dv-scroll-board .rows .row-item .ceil {
  padding: 0!important;
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  width: 100%;
  height: 100%;
}
#dv-full-screen-container {
  display: flex;
  flex-direction: column;
  padding: 0 24px 24px;
  background: url("./assets/img/20210301143936536zgmhi5(1).jpg") no-repeat center center;
  background-size: cover;
  position: relative;
}
#dv-full-screen-container::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background-color: #060e1f;
  opacity: .65;
  z-index: -1;
}
.header .title {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #1BBEEE;
  font-size: 16px;
  background-size: 100% auto;
  padding: 12px 0;
  background-image: radial-gradient();
  background-position: center 100%;
  background-repeat: no-repeat;
  background-size: 50% 5px;
  position: relative;
}
.header .title h1 {
  font-weight: bolder;
  padding: 0 12px;
}
.header .title >img {
  width: 10%;
}
.header .title .note {
  color: #fff;
  font-size: 22px;
  font-weight: bold;
  position: absolute;
  right: 0;
  top: 0;
  display: flex;
  align-items: center;
}
.header .title .note >img{
  width: 70px;
}
.header .title .note span {
  padding: 0 6px;
}
.header ul {
  width: 100%;
  height: 128px;
  padding: 12px 0;
  display: flex;
  justify-content: space-between;
}
.header ul li {
  width: calc(100% / 9);
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url("./assets/img/border.png") no-repeat center center;
  background-size: 100% 100%;
}
.header ul li img {
  height: 56px;
}
.header ul li div {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  padding-left: 12px;
}
.header ul li div p:nth-of-type(2) {
  font-size: 30px;
}
.container {
  flex: 1;
  display: flex;
  justify-content: space-between;
  overflow: hidden;
}
.container .col1 {
  width: 20%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.container .col1 .row1 {
  height: 41%;
  border: 1px solid rgba(78, 147, 249, .2);
}
.container .col1 .row2 {
  height: 57%;
  border: 1px solid rgba(78, 147, 249, .2);
}
.container .col2 {
  width: 48%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.container .col2 .row1 {
  height: 49%;
  overflow: hidden;
  border: 1px solid rgba(78, 147, 249, .2);
}
.container .col2 .row2 {
  height: 49%;
  border: 1px solid rgba(78, 147, 249, .2);
}
.container .col3 {
  width: 30%;
  border: 1px solid rgba(78, 147, 249, .2);
}
#dv-full-screen-container >.center {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .8);
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 100000;
}
#dv-full-screen-container >.center >.close {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #07173d;
  margin-top: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
}
#dv-full-screen-container >.center .close img {
  width: 16px;
  height: 16px;
}
/* 过渡动画 */
.fade-enter-from {
    /* transform: translateY(-300px); */
  transform: scale(1.2);
}
.fade-enter-active {
    transition: transform .4s ease;
}
.fade-enter-to {
    /* transform: translateY(15px); */
}
.fade-leave-from {
    /* transform: translateY(15px); */
    transform: scale(1.2);
}
.fade-leave-active {
    transition: transform .4s ease-in;
}
.fade-leave-to {
    opacity: 0;
}
</style>
